﻿<h3>Featured Products</h3>
<a href="#/new_product"><div class="btn btn-info" style="float:right"><i class="icon-plus"></i> Gadget</div></a>
<label class="control-label">Sort By</label>
<select ng-model="sortExpression">

    <option value="Name" selected>Name A-Z</option>
    <option value="-Name">Name Z-A</option>
    <option value="Price">Price - Lowest to Highest</option>
    <option value="-Price">Price - Highest to Lowest</option>
</select>

<ul class="thumbnails">
    <li ng-repeat="gadget in Gadgets | filter: search | orderBy: sortExpression" class="span3">
        <div class="thumbnail" id="admin-thumbnail">
            <div class="btn btn-warning"><a href="#/edit_product/{{gadget.Id}}"><i class="icon-pencil"></i></a></div>
                <div ng-click="deleteGadget(gadget.Id)" class="btn btn-danger"><i class="icon-trash"></i></div><br/><br/>
            <a href="#/product_details/{{gadget.Id}}"><img src="{{gadget.TopPict}}" id="indexPic" /></a>
            <div class="caption">
                <h5>{{gadget.Name}}</h5>
                <p>
                    {{gadget.Description}}
                </p>
                <h4 style="text-align:center"><a class="btn" href="#/admin_product_details/{{gadget.Id}}"> <i class="icon-zoom-in"></i></a> <button class="btn" ng-click="addItem(gadget.Id)">Add to <i class="icon-shopping-cart"></i></button> <div class="btn btn-primary">{{gadget.Price}}</div></h4>
            </div>
        </div>
    </li>
</ul>
